<template>
    <div id="thirdMap" ref="thirdMap" style="width: 500px; height:330px;margin:0 auto"></div>
</template>

<script>
import echarts from 'echarts'
export default {
    props: {
        thirdList:{
            type:Array
        },
       
        changeSelected: {
            type: String
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    watch: {
        thirdList: {
            deep: true,
            handler(val) {
                this.setOptions(val);
            }
        },
      
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById('thirdMap'), null, { renderer: 'svg' });
            this.setOptions(this.thirdList);
        },


        setOptions(newArr) {
           
            let monthList = newArr.map(item => {
                return item.month
            })
            let bottomArr = Array.from(new Set(monthList))
            // 出口 金额
            const expList = newArr.filter(item => {
                return item.ieFlag == 'E'

            })
            let eDW=expList[0].realTaxTotal?expList[0].realTaxTotal.slice(-1):expList[1].realTaxTotal.slice(-1)
            const realTaxList = expList.map(item => {

                if (!item.realTaxTotal) {
                    return 0
                } else {
                    return +item.realTaxTotal.slice(0,-1)
                }
            })

            // 进口金额
            const impList = newArr.filter(item => {
                return item.ieFlag == 'I'

            })
            let iDW=impList[0].realTaxTotal?impList[0].realTaxTotal.slice(-1):impList[1].realTaxTotal.slice(-1)
            const realTaxList1 = impList.map(item => {
                if (!item.realTaxTotal) {
                    return 0
                } else {
                    return +item.realTaxTotal.slice(0,-1)
                }
            })
           
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: newArr.length > 0 ,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                color: [
                    "#ff9345",
                    "#00e2ff",

                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: "shadow",
                    },
                     formatter:function(params){
                       let str=params[0].axisValue+'<br />'
                       params.forEach(item=>{
                        if(item.seriesName=='进口'){
                            str+=`${item.seriesName}: ${item.data}${iDW}<br />`
                        }else {
                            str+=`${item.seriesName}: ${item.data}${eDW}<br />`
                        }
                       })
                        return str
                    }
                },
                legend: {
                    show: newArr.length > 0,
                    data: ['进口', '出口'],
                    top: 10,
                    textStyle: {
                        color: '#fff',
                       
                    },
                   
                },

                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: bottomArr,

                        axisLine: {
                            show: newArr.length > 0,  //这是x轴文字颜色
                            lineStyle: {
                                color: "#fff"
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        


                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: newArr.length > 0?'单位：'+iDW+'(进口)':'',
                        nameLocation: 'end',
                        nameTextStyle: {
                            color: "#fff",
                            fontWeight: 'lighter'
                        },
                        axisLine: {//这是y轴文字颜色
                            show: false,
                            lineStyle: {
                                color: "#fff",

                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ["rgba(209,209,209,.25)"],
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                    },
                    {
                        type: 'value',
                        name: newArr.length > 0?'单位：'+eDW+'(出口)':'',
                        nameLocation: 'end',
                        nameTextStyle: {
                            color: "#fff",
                            fontWeight: 'lighter'
                        },
                        axisLine: {//这是y轴文字颜色
                            show: false,
                            lineStyle: {
                                color: "#fff",

                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ["rgba(209,209,209,.25)"],
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                    }
                ],
                series: [
                    {
                        name: '进口',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        smooth: true,  //这个是把线变成曲线
                        emphasis: {
                            focus: 'series'
                        },
                        data: realTaxList1
                    },
                    {
                        name: '出口',
                        type: 'line',
                         yAxisIndex:1,
                        stack: 'Total',
                        smooth: true,  //这个是把线变成曲线
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: realTaxList
                    },

                ]
            })
        },
    },
}

</script>

<style>

</style>